<template>
  <div class="container">
    <div class="layout">
      <div class="layout-left-side">
        <a-card>
          <a-row style="margin-bottom: 16px">
            <a-col :span="16">
              <a-space>
                <a-button
                  v-permission="authority.SYS_DICT_ADD"
                  type="primary"
                  @click="add"
                >
                  <template #icon>
                    <icon-plus />
                  </template>
                  新建
                </a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-table
            row-key="id"
            hoverable
            :loading="loading"
            :pagination="pagination"
            :data="renderData"
            :columns="columns"
            :bordered="{ wrapper: true, cell: true }"
            @page-change="changeCurrent"
            @page-size-change="changePageSize"
            @row-click="rowClick"
          >
            <template #operations="{ record }">
              <a-button
                v-permission="authority.SYS_DICT_EDIT"
                type="text"
                size="small"
                @click="edit(record)"
              >
                <template #icon>
                  <icon-edit />
                </template>
                编辑
              </a-button>
              <a-popconfirm
                :content="`此操作将永久删除(${record.description}), 是否继续?`"
                type="warning"
                @ok="del(record.id)"
              >
                <a-button
                  v-permission="authority.SYS_DICT_DEL"
                  type="text"
                  size="small"
                  status="danger"
                >
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-card>
      </div>

      <div class="layout-right-side">
        <a-card>
          <a-row style="margin-bottom: 16px">
            <a-col :span="16">
              <a-space v-if="chooseDict">
                <a-button
                  v-permission="authority.SYS_DICT_ADD"
                  type="primary"
                  @click="addItem"
                >
                  <template #icon>
                    <icon-plus />
                  </template>
                  新建
                </a-button>
                <a-space>
                  <a-tag size="large">{{ chooseDict.description }}</a-tag>
                  <a-tag size="large">{{ chooseDict.type }}</a-tag>
                </a-space>
              </a-space>
            </a-col>
          </a-row>
          <a-table
            row-key="id"
            :loading="itemLoading"
            :pagination="itemPagination"
            :data="itemRenderData"
            :columns="itemColumns"
            :bordered="{ wrapper: true, cell: true }"
            @page-change="itemChangeCurrent"
            @page-size-change="itemChangePageSize"
          >
            <template #operations="{ record }">
              <a-button
                v-permission="authority.SYS_DICT_EDIT"
                type="text"
                size="small"
                @click="editItem(record)"
              >
                <template #icon>
                  <icon-edit />
                </template>
                编辑
              </a-button>
              <a-popconfirm
                :content="`此操作将永久删除(${record.label}), 是否继续?`"
                type="warning"
                @ok="delItem(record.id)"
              >
                <a-button
                  v-permission="authority.SYS_DICT_DEL"
                  type="text"
                  size="small"
                  status="danger"
                >
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除
                </a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </a-card>
      </div>
    </div>
    <DictForm
      v-model:visible="formDialogVisible"
      :form-data="formData"
      @refresh="refresh"
    />
    <DictItemForm
      v-model:visible="itemFormDialogVisible"
      :form-data="itemFormData"
      :dict="chooseDict"
      @refresh="itemRefush"
    />
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { usePagination } from 'vue-request';
  import authority from '@/utils/authority';
  import defaultPageOptions from '@/utils/pagination';

  import {
    dictPage,
    deleteDict,
    deleteDictItem,
    dictItemPage,
  } from '@/api/upms/dict';
  import DictForm from './components/dict-form.vue';
  import DictItemForm from './components/dict-item-form.vue';

  const {
    data,
    loading,
    changeCurrent,
    changePageSize,
    refresh,
    current,
    pageSize,
    total,
  } = usePagination(dictPage, { ...defaultPageOptions });

  const renderData = computed(() => data.value?.records || []);

  const formData = ref();

  const pagination = computed(() => ({
    current: current.value,
    pageSize: pageSize.value,
    showTotal: true,
    showPageSize: true,
    total: total.value,
  }));

  const columns = [
    { title: '类型', dataIndex: 'type' },
    {
      title: '描述',
      dataIndex: 'description',
    },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', slotName: 'operations' },
  ];

  const {
    data: itemData,
    loading: itemLoading,
    changeCurrent: itemChangeCurrent,
    changePageSize: itemChangePageSize,
    refresh: itemRefush,
    current: itemCurrent,
    pageSize: itemPageSize,
    total: itemTotal,
    runAsync: itemRunAsync,
  } = usePagination((params) => dictItemPage(params), {
    ...defaultPageOptions,
    manual: true,
  });

  const itemRenderData = computed(() => itemData.value?.records || []);

  const itemFormData = ref();

  const itemPagination = computed(() => ({
    current: itemCurrent.value,
    pageSize: itemPageSize.value,
    showTotal: true,
    showPageSize: true,
    total: itemTotal.value,
  }));

  const itemColumns = [
    { title: '数据值', dataIndex: 'value' },
    {
      title: '标签名',
      dataIndex: 'label',
    },
    { title: '排序', dataIndex: 'sort' },
    { title: '描述', dataIndex: 'description' },
    {
      title: '操作',
      slotName: 'operations',
    },
  ];
  // 弹出框标记
  const formDialogVisible = ref(false);

  // 弹出框标记
  const itemFormDialogVisible = ref(false);

  // 选择的列ID
  const chooseDict = ref();

  const rowClick = (record: any) => {
    chooseDict.value = record;
    itemRunAsync({ dictId: record.id });
  };

  const add = () => {
    formData.value = {};
    formDialogVisible.value = true;
  };
  const edit = (e: any) => {
    formDialogVisible.value = true;
    formData.value = { ...e };
  };
  const del = async (id: string) => {
    await deleteDict(id).then(() => {
      Message.success('删除成功');
      refresh();
    });
  };

  const addItem = () => {
    itemFormData.value = {};
    itemFormDialogVisible.value = true;
  };
  const editItem = (e: any) => {
    itemFormDialogVisible.value = true;
    itemFormData.value = { ...e };
  };
  const delItem = async (id: string) => {
    await deleteDictItem(id).then(() => {
      Message.success('删除成功');
      itemRefush();
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'Dict',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
  .layout {
    display: flex;

    &-left-side {
      flex: 1;
    }

    &-right-side {
      margin-left: 10px;
      flex: 1;
    }
  }
</style>
